<template>
  <div id="CourseInf">
    <a-form layout="inline" style="margin-bottom: 8px">
      <a-form-item label="关键字" class="searchItem">
        <a-input v-model="keyword" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="">
        <a-button type="primary" @click="getData"> 查询 </a-button>
      </a-form-item>
    </a-form>
    <a-button type="primary" @click="addbtn()">新增</a-button>
    <a-table
      :scroll="{ y: 500 }"
      bordered
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => index"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button
          v-if="$store.state.userData.roleName == 'educator'&&record.operation"
          type="primary"
          @click="editClick(record)"
          style="margin-right: 10px"
          >修改信息</a-button
        >
        <a-button
          v-if="$store.state.userData.roleName == 'educator'&&record.operation"
          type="danger"
          @click="deleteClick(record)"
          >删除</a-button
        >
      </template>
    </a-table>
    <a-modal v-model="visible" :maskClosable="false" :title="title">
      <a-form-model
        :label-col="{ span: 10 }"
        :wrapper-col="{ span: 8 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="课程名称" prop="name">
          <a-input v-model="form.name" style="width: 236px" />
        </a-form-model-item>
        <a-form-model-item label="课程描述" prop="description">
          <a-input v-model="form.description" style="width: 236px" />
        </a-form-model-item>
        <!-- <a-form-model-item label="创建用户" prop="createUser">
          <a-input v-model="form.createUser" style="width: 236px" />
        </a-form-model-item> -->
        <!-- <a-form-model-item label="保密等级" prop="grade">
          <a-input v-model="form.grade" style="width: 236px"/>
        </a-form-model-item>
        <a-form-model-item label="起止日期" prop="time">
          <a-range-picker
            v-model="form.time"
            format="YYYY.MM.DD"
            style="width: 236px"
          />
        </a-form-model-item>
        <a-form-model-item label="创建日期" prop="createTime">
          <a-date-picker
            v-model="form.createTime"
            format="YYYY-MM-DD"
            style="width: 236px"
          />
        </a-form-model-item> -->
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    role: {},
  },
  data() {
    return {
      keyword: "", //关键字
      form: {
        name: "", // 课程名称
        description: "", //课程描述
        createUser: "", //创建用户
      },
      rules: {
        name: [{ required: true, message: "请输入课程名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入课程描述", trigger: "blur" },
        ],
        createUser: [
          { required: true, message: "请输入创建用户", trigger: "blur" },
        ],
        time: [{ required: true, message: "请输入起止日期", trigger: "blur" }],
        createTime: [
          { required: true, message: "请输入创建日期", trigger: "blur" },
        ],
      },
      visible: false,
      title: null,
      columns: [
        //主页table列的配置
        {
          title: "课程名称",
          dataIndex: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "课程描述",
          dataIndex: "description",
          customRender: (text, record) => {
            return record.description ? record.description : "—";
          },
        },
        {
          title: "创建用户",
          dataIndex: "createUser",
          customRender: (text, record) => {
            return record.createUser ? record.createUser : "—";
          },
        },
        // {
        //   title: "秘密等级",
        //   dataIndex: "grade",
        //   customRender: (text, record) => {
        //     return record.grade ? record.grade : "—";
        //   },
        // },
        // {
        //   title: "起止日期",
        //   dataIndex: "time",
        //   customRender: (text, record) => {
        //     return record.time ? record.time : "—";
        //   },
        // },
        {
          title: "操作",
          width: 200,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        pageSize: 10,
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  watch: {
    visible: {
      handler(newVal) {
        if (!newVal) {
          this.$refs.formRef.resetFields(); //重置表单校验
          this.form = {
            name: "", // 课程名称
            description: "", //课程描述
            createUser: "", //创建用户
          };
        }
      },
    },
  },
  created() {
    this.getData();
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.tablePagination.current = pagination.current;
      this.tablePagination.pageSize = pagination.pageSize;
      this.getData();
    },
    deleteClick(row) {
      //点击删除
      let data = {
        id: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios.delete("/curriculum/delete", { data }).then((res) => {
            if (res.code == 200) {
              that.$message.success("删除成功");
              that.getData();
            }
          });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
    editClick(row) {
      //编辑
      this.$axios
        .get("/curriculum/detail", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.form.id = res.data.id;
          this.form.name = res.data.name;
          this.form.description = res.data.description;
          this.form.createUser = res.data.createUser;
          this.title = "编辑课程基本信息";
          this.visible = true;
        });
      // for (let i in row) {
      //   if (i in this.form && i != "time") {
      //     this.form[i] = row[i];
      //   }
      // }
      // this.form.id=row.id;
      // this.title = "编辑";
      // this.visible = true;
    },
    addbtn() {
      //新增
      this.title = "新增课程基本信息";
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        console.log(this.$refs.formRef, 123);
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            let data = {
              id: this.form.id,
              name: this.form.name, // 课程名称
              description: this.form.description, //课程描述
              createUser: this.form.createUser, //创建用户
            };
            if (this.title == "新增课程基本信息") {
              this.$axios.post("/curriculum/create", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("新增成功");
                  this.getData();
                  this.visible = false; // 关闭模态框
                }
              });
            } else if (this.title == "编辑课程基本信息") {
              this.$axios.put("/curriculum/update", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("编辑成功");
                  this.getData();
                  this.visible = false; // 关闭模态框
                }
              });
            }
          } else {
            console.log("校验失败");
          }
        });
      });
    },
    async getData() {
      let { data } = await this.$axios.get("/curriculum/page/list", {
        params: {
          page: this.tablePagination.current,
          size: this.tablePagination.pageSize,
          keyword: this.keyword,
        },
      });
      this.tableData = data.records;
      this.tablePagination.total = data.total;
    },
  },
};
</script>

<style>
</style>